<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>文件上传</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-color: white;
            font-family: -apple-system, "Microsoft YaHei UI Light";
        }

        img {
            border-style: none;
            max-width: 100%;
            vertical-align: middle;
        }

        .vu-one-box .vu-title-box {
            display: flex;
            width: 94%;
            height: 50px;
            margin: 0 auto;
            justify-content: flex-end;
            align-items: center;
        }

        .vu-one-box .vu-title-box input[type="file"] {
            display: none;
        }

        .vu-one-box .vu-title-box label {
            background: #1E9FFF;
            color: #ffffff;
            font-size: 12px;
            height: 30px;
            line-height: 30px;
            padding: 0 25px;
            border-radius: 4px;
            cursor: pointer;
        }

        .vu-one-box .vu-title-box label:hover {
            background: #2D93CA;
        }

        .vu-one-box .vu-pic {
            width: 94%;
            height: 380px;
            margin: 0 auto;
            border: 1px solid #efefef;
            padding: 5px;
            box-sizing: border-box;
            overflow-y: scroll;
        }

        .vu-one-box .vu-pic ul {
            display: flex;
            justify-content: flex-start;
            flex-flow: row wrap;
        }

        .vu-one-box .vu-pic ul li {
            list-style: none;
            width: 20%;
            padding: 2px;
            box-sizing: border-box;
        }

        .vu-one-box .vu-pic ul li figure {
            border-radius: 5px;
            padding: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .vu-one-box .vu-pic ul li:hover figure {
            background-color: #1E9FFF;
            transition: background-color 0.5s ease;
        }

        .vu-one-box .vu-pic ul li figure span {
            position: relative;
            display: block;
            width: 100%;
            height: 0;
            padding-bottom: 150px;
            overflow: hidden;
            line-height: 150px;
        }

        .vu-one-box .vu-pic ul li figure figcaption {
            font-size: 12px;
            color: #666666;
            height: 20px;
            margin-top: 3px;
            line-height: 20px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .vu-one-box .vu-pic ul li:hover figure figcaption {
            color: #ffffff;
        }

        .vu-one-box .vu-pic ul li.active figure {
            background: #1E9FFF;
        }

        .vu-one-box .vu-pic ul li.active figure figcaption {
            color: #ffffff;
        }

        .vu-one-box .vu-btn-group {
            display: flex;
            width: 94%;
            margin: 0 auto;
            justify-content: flex-end;
            align-items: center;
        }

        .vu-one-box .vu-btn-group .vu-page {
            display: flex;
            height: 60px;
            align-items: center;
        }

        .vu-one-box .vu-btn-group .vu-page span {
            border-radius: 5px;
            font-size: 12px;
            padding: 6px 15px;
            cursor: pointer;
            border: 1px solid #efefef;
            color: #999999;
        }

        .vu-one-box .vu-btn-group .vu-page span:hover {
            background: #efefef;
        }

        .vu-one-box .vu-btn-group .vu-page b {
            margin: 0 10px;
            font-size: 12px;
            color: #666666;
        }

    </style>

</head>
<body>
<div id="vuOne" class="vu-one-box">
    <div class="vu-content-box">
        <div class="vu-title-box">
            <input class="file" id="onUp" name="file" type="file" accept="image/png,image/gif,image/jpeg"
                   @change="update" multiple/>
            <label for="onUp">上传文件</label>
        </div>
        <div class="vu-pic-box">
            <div class="vu-pic">
                <ul>
                    <li v-for="(item,index) in picAry" :key="item.mtime" :class="{active:item.active}"
                        @click="onActive(index)">
                        <figure>
                            <span>
                                <img :src="item.url" :alt="item.url"/>
                            </span>
                            <figcaption>{{item.url}}</figcaption>
                        </figure>
                    </li>
                </ul>
            </div>
            <div class="vu-btn-group">
                <div class="vu-page">
                    <span @click="getPage(1)">上一页</span>
                    <b>{{ itemPage }}/{{ allPage }}</b>
                    <span @click="getPage(2)">下一页</span>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    let index = parent.layer.getFrameIndex(window.name),
        hostAPI = '/file_api.html';
    new Vue({
        el: "#vuOne",
        data: {
            itemPage: 1,
            allPage: 1,
            picAry: [],
            activeAry: []
        },
        beforeMount: function () {
            let that = this;
            axios.get(hostAPI + '?action=listimage&start=0&size=20')
                .then(function (res) {
                    let picAry = res.data.list,
                        picAryNew = [],
                        allPage = Math.ceil(res.data.total / 20);
                    for (let item in picAry) {
                        if (picAry.hasOwnProperty(item)) {
                            picAry[item].active = false;
                            picAryNew.push(picAry[item]);
                        }
                    }
                    that.picAry = picAryNew;
                    that.allPage = allPage ? allPage : 1;
                    that.itemPage = 1;
                }).catch(function (e) {
                console.log(e);
            });
        },
        methods: {
            onActive: function (res) {
                let that = this,
                    activeAry = that.activeAry;
                if (that.picAry[res].active) {
                    that.picAry[res].active = false;
                    for (let item in activeAry) {
                        if (activeAry.hasOwnProperty(item)) {
                            if (res === activeAry[item].key) {
                                activeAry.splice(item, 1);
                            }
                        }
                    }
                    that.activeAry = activeAry;
                } else {
                    that.picAry[res].active = true;
                    let newItem = {key: res, url: that.picAry[res].url};
                    activeAry.push(newItem);
                    that.activeAry = activeAry;
                }
                parent.activeArray = that.activeAry;
            },
            update(e) {
                let files = e.target.files,
                    that = this;
                for (let i = 0; i < files.length; i++) {
                    let param = new FormData(),
                        config = {
                            headers: {'Content-Type': 'multipart/form-data'}
                        };
                    param.append('upfile', files[i]);
                    axios.post(hostAPI + '?action=uploadimage&encode=utf-8', param, config)
                        .then(function (res) {
                            if (res.data.state === 'SUCCESS') {
                                if (i === files.length - 1) {
                                    axios.get(hostAPI + '?action=listimage&start=0&size=20')
                                        .then(function (res) {
                                            let picAry = res.data.list,
                                                picAryNew = [],
                                                allPage = Math.ceil(res.data.total / 20);
                                            for (let item in picAry) {
                                                if (picAry.hasOwnProperty(item)) {
                                                    picAry[item].active = false;
                                                    picAryNew.push(picAry[item]);
                                                }
                                            }
                                            that.picAry = picAryNew;
                                            that.allPage = allPage ? allPage : 1;
                                            that.itemPage = 1;
                                        }).catch(function (e) {
                                        console.log(e);
                                    });
                                }
                            } else {
                                alert('请上传小于1M的文件');
                            }
                        });
                }
            },
            getPage: function (pages) {
                let that = this,
                    url = '';
                if (pages === 1) {
                    if (that.itemPage !== 1) {
                        url = hostAPI + '?action=listimage&start=' + ((that.itemPage - 1) * 20 - 20) + '&size=20';
                        that.itemPage = that.itemPage - 1;
                    } else {
                        return false;
                    }
                } else if (pages === 2) {
                    if (that.itemPage < that.allPage) {
                        url = hostAPI + '?action=listimage&start=' + that.itemPage * 20 + '&size=20';
                        that.itemPage = that.itemPage + 1;
                    } else {
                        return false;
                    }
                }
                axios.get(url).then(function (res) {
                    let picAry = res.data.list,
                        picAryNew = [],
                        allPage = Math.ceil(res.data.total / 20);
                    for (let item in picAry) {
                        if (picAry.hasOwnProperty(item)) {
                            picAry[item].active = false;
                            picAryNew.push(picAry[item]);
                        }
                    }
                    that.picAry = picAryNew;
                    that.allPage = allPage ? allPage : 1;
                }).catch(function (e) {
                    console.log(e);
                });
            }
        }
    });
</script>
</body>
</html>